<template>
  <div class="t-tree">
    <div class="role-list">
      <div class="left-header">角色列表
      </div>
      <tree :data="treeData"
            :expandOnClicknode="expandOnClicknode"
            :defaultExpandAll="defaultExpandAll"
            :nodeKey="nodeKey"
            v-model="selectId"
            :props="props"></tree>
    </div>

    <div class="action-container">
      <div class="right-header">
        <span class="text">角色权限分配</span>

        <el-button type="primary"
                   size="mini"
                   @click="save"
                   icon="el-icon-success">保存</el-button>
      </div>
      <el-scrollbar style="flex: 0.885;">
        <el-tree ref="childrenTree"
                 :data="childrenData"
                 @check-change="leftCheckChange"
                 :showCheckbox="true"
                 :node-key="nodeKey"
                 :defaultExpandAll="defaultExpandAll"
                 :props="childrenProps">
          <div class="action-group"
               slot-scope="{ node, data }">
            <div class="action-text"
                 :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }">
              {{ data.text }}
            </div>
            <div class="action-item">
              <el-checkbox v-for="(item, index) in data.actions"
                           :key="index"
                           v-model="item.checked"
                           @change="() => {}">{{ item.text }}</el-checkbox>
            </div>
          </div>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import tree from "@/components/tree/index";

export default {
  components: {
    tree: tree,
  },
  data() {
    return {
      treeData: [],
      nodeKey: "id",
      expandOnClicknode: false,
      defaultExpandAll: true,
      selectId: "",
      props: {
        children: "children",
        label: "roleName",
      },

      childrenList: [],
      childrenData: [],
      childrenProps: {
        children: "children",
        label: "text",
      },
    };
  },
  created() {
    this.loadTree();
  },
  methods: {
    leftCheckChange(node, selected) {
      node.actions.forEach((x, index) => {
        this.$set(x, "checked", selected);
      });
    },
    //左边角色树
    loadTree() {
      //获取左边树
      this.$http.post("/api/role/getUserChildRoles", "", (res) => {
        res.data.forEach((x) => {
          if (x.parentId == 0) {
            x.children = [];
            this.treeData.push(x);
            this.getTree("parentId", x.id, res.data);
          }
        });
      });

      //获取右边树
      this.$http.post("/api/role/getCurrentTreePermission", "", (res) => {
        this.childrenList = res.data.tree;
        this.childrenList.forEach((x) => {
          if (x.pid == 0) {
            x.children = [];
            this.childrenData.push(x);
            this.getTree("pid", x.id, this.childrenList);
          }
        });
      });
    },
    getTree(pstr, id, data) {
      let ent = data.filter((c) => c.id == id)[0];
      data.forEach((x) => {
        if (x[pstr] == id) {
          if (!x.children) x.children = [];
          ent.children.push(x);
          this.getTree(pstr, x.id, data);
        }
      });
    },

    //右边菜单树
    getUserRole() {
      //清空复选框
      this.childrenList.forEach((x) => {
        x.actions.forEach((a) => {
          this.$set(a, "checked", false);
        });
      });
      this.$http.post(
        "/api/role/getUserTreePermission?roleId=" + this.selectId,
        {},
        (result) => {
          let getNodeKey = [];
          result.data.forEach((item) => {
            if (item.actions.length == 0) return;
            let sourceItem = this.childrenList.find((f) => f.id == item.id);
            if (!sourceItem) return;
            item.actions.forEach((actions) => {
              sourceItem.actions.forEach((soure) => {
                if (soure.value == actions.value) {
                  if (getNodeKey.filter((c) => c == item.id).length == 0) {
                    getNodeKey.push(item.id);
                  }
                  this.$set(soure, "checked", true);
                }
              });
            });
          });

          //选中节点 TODO 暂不能选中
          if (getNodeKey > 0) {
            this.$nextTick(() => {
              this.$refs.childrenTree.setCheckedKeys(getNodeKey);
            });
          }
        }
      );
    },

    save() {
      if (!this.selectId) {
        return this.$msg.error("请选择角色!");
      }
      let userPermissions = [];
      this.childrenList.forEach((x) => {
        let checkedPermission = x.actions.filter((f) => {
          return f.checked;
        });
        if (checkedPermission.length > 0) {
          let actions = checkedPermission.map((m) => {
            return { text: m.text, value: m.value };
          });
          userPermissions.push({
            id: x.id,
            actions: actions,
          });
        }
      });

      //  let roleId = this.roles[this.selectIndex].id;
      this.$http.post(
        "/api/role/SavePermission?roleId=" + this.selectId,
        userPermissions,
        (res) => {
          if (res.status) {
            this.$msg.success("操作成功");
          }
        }
      );
    },
  },
  watch: {
    selectId: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.getUserRole();
        }
      },
    },
  },
};
</script>


<style lang="less" scoped>
.t-tree {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 12px;
  background: #eee;
  /* padding: 100px; */
}
.left-header {
  color: #fff;
  line-height: 40px;
  background: #1a89ff;
  padding: 0 13px;
  font-size: 16px;
  top: 2px;
  position: relative;
}

.right-header {
  width: 86%;
  background: #f9f8f8;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  float: left;
  position: relative;
  font-size: 15px;
  padding: 0 15px;
  button {
    position: absolute;
    right: 20px;
    top: 6px;
  }
}
.action-container {
  border-radius: 4px;
  flex: 1;
  margin-left: 15px;
  background: white;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.role-list {
  width: 15%;
  border: 1px solid #eee;
  border-bottom: 0;
  float: left;
}

.actived {
  color: #409efe !important;
  background-color: #f3f7f9;
}
</style>
<style scoped>
.action-group {
  width: 100%;
  display: flex;
}
.action-text {
  font-size: 14px;
  margin-right: 10px;
}
.action-item {
  flex: 1;
}
.action-item > label {
  width: 55px;
  margin-left: 3px;
}
.action-container >>> .el-tree-node {
  padding: 5px 0;
}
.action-container >>> .el-checkbox__label {
  padding-left: 5px;
}
</style>
